<template>
    <div id="progress-loop" ref="chartDom" style="width: 100%;height: 20px;"></div>
</template>
  
  <script setup lang="ts" name="dataScreen">
  import { watch,ref,onMounted, onBeforeUnmount, reactive, nextTick } from 'vue'
  import { debounce } from "@/utils";
  import { countSize } from "@/utils/utils";
  import * as echarts from 'echarts';
  const chartDom = ref();
  
  const props = defineProps({
    valueData: {
      type: Number,
      default: [],
    }
  })
  let myChart = null;
    const Option = computed(() => {
      return {
        tooltip: {
          show: false,
          backgroundColor: "rgba(3,169,244, 0.5)", //背景颜色（此时为默认色）
          textStyle: {
            fontSize: countSize(.16),
          },
        },
        color: ["#F7B731"],
        legend: {
          show: false,
          pageIconSize: [12, 12],
          itemWidth: 20,
          itemHeight: 10,
          textStyle: {
            //图例文字的样式
            fontSize: 10,
            color: "#fff",
          },
          selectedMode: false,
          // data: ['个人所得(亿元)'],
        },
        grid: {
          left: "0%",
          right: "0%",
          width: "100%",
          bottom: "0%",
          top: "0%",
          containLabel: false,
        },
        xAxis: {
          type: "value",
          splitLine: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
        },
        yAxis: [
          {
            type: "category",
            inverse: false,
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisPointer: {
              label: {
                show: false,
                //margin: 30
              },
            },
            pdaaing: [5, 0, 0, 0],
            postion: "right",
            data:['19785'],
            axisLabel: {
              show: false,
            },
          }
        ],
        series: [
          {
            zlevel: 1,
            name: "",
            type: "bar",
            barWidth:countSize(.16),
            animationDuration: 1500,
            data:[
              {           
                value: props.valueData,
                itemStyle:{
                  color:new echarts.graphic.LinearGradient(0, 1, 1, 1, [
                    { offset: 0, color: "#276a53" },
                    { offset: 1, color: "#e4ff00" },
                  ]),
                }
              }
            ],
            align: "center",
            itemStyle: {
              normal: {
                barBorderRadius: 30,
              },
            },
            label: {
              show: false,
              fontSize: 10,
              color: "#fff",
              textBorderWidth: 2,
              padding: [2, 0, 0, 0],
            },
          },
          {
            name: "",
            type: "bar",
            barWidth: countSize(.16),
            barGap: "-100%",
            margin: "20",
            data: ['20'],
            textStyle: {
              //图例文字的样式
              fontSize: 10,
              color: "#fff",
            },
            itemStyle: {
              normal: {
                color: "#142831",
                //width:"100%",
                fontSize: countSize(.16),
                barBorderRadius: 30,
              },
            },
          },
        ],
      };
    })
    const initChart = () => {
      myChart.setOption(Option.value);
    };
    const resizeChart = () => {
      myChart.resize();
      initChart()
    };
    const resizeHandler = debounce(resizeChart, 100);
    onMounted(() => {
      nextTick(() => {
        myChart = echarts.init(chartDom.value);
        initChart();
      });
      window.addEventListener("resize", resizeHandler);
    });
    onBeforeUnmount(() => {
      window.removeEventListener("resize", resizeHandler);
      myChart.dispose();
    });
  </script>
  